<template>
  <view class="ver-layout">
    <view class="top-layout ver-layout">
      <view class="title">Steam</view>
      <view class="content">Fast redeem,Physical card or only code rate is same.</view>
    </view>
    <!--  计算  -->
    <view class="card-layout ver-layout" style="margin-top: -80px;">
      <image class="image" src="https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/-1529573953_825288341.png"></image>
      <view class="text">Fast redeem,Stable,Highest rate.</view>
      <check-group></check-group>
      <view class="content ver-layout">
        <view class="hor-layout-side-center title-item">
          <view>Face Value</view>
          <view>Rate</view>
        </view>
        <view class="hor-layout-side-center line-item">
          <view>50-200(include Ecode)</view>
          <view>N500</view>
        </view>
        <view class="hor-layout-side-center line-item">
          <view>1-49(include Ecode)</view>
          <view>N480</view>
        </view>
      </view>
      <view style="align-self: flex-end;width: 100px;margin: 10px">
        <u-button size="small" type="primary" text="Calculator" @click="toPage(calculateValue)"></u-button>
      </view>
    </view>
    <!--  折线图  -->
    <view class="card-layout1 ver-layout" style="margin-top: 20px">
      <view class="title-view">Gift card details</view>
      <view class="image"></view>
    </view>
  </view>
</template>

<script>
import checkGroup from "@/components/check-group";
import {calculateValue} from "@/router"

export default {
  name: "cardTrade",
  components: {
    checkGroup
  },
  data() {
    return {
      calculateValue
    }
  }
}
</script>

<style scoped lang="scss">
.top-layout {
  color: white;
  padding: 12px;
  padding-bottom: 150px;
  background: linear-gradient(to bottom, #55BBB3 0%, #3bb2b8 100%);

  .title {
    font-weight: bolder;
  }

  .content {
    font-size: small;
    margin-top: 20px;
  }
}

.card-layout {
  margin: auto;
  width: 85%;
  color: #666666;
  padding: 10px;
  background: aliceblue;
  border-radius: 10px;

  .image {
    width: 90%;
    margin: auto;
    background: #eeeeee;
  }

  .text {
    margin-top: 15px;
    font-weight: lighter;
    font-size: small;
    border-bottom: 1px solid #eaeaea;
  }

  .content {
    padding: 10px;
    font-size: small;
    border-radius: 10px;
    background: #eeeeee;

    .title-item {
      height: 30px;
      line-height: 30px;
      font-weight: bold;
    }

    .line-item {
      height: 20px;
      line-height: 20px;
    }
  }
}

.card-layout1 {
  margin: auto;
  margin-bottom: 30px;
  width: 85%;
  padding: 10px;
  background: aliceblue;
  border-radius: 10px;

  .title-view {
    height: 45px;
    line-height: 45px;
    font-weight: bold;
    border-bottom: 1px solid #eaeaea;
  }

  .image {
    width: 90%;
    height: 100px;
    margin: auto;
    margin-top: 10px;
    background: #eeeeee;
  }
}
</style>
